<template>
  <div class="collection">
    <div class="collTop">我的收藏</div>
    <div class="collcon">
      <el-table ref="collTable"  :data="colllist" style="width: 100%">
        <el-table-column label="商家logo" align="center" width="180">
          <template slot-scope="scope">
            <img class="logoimg" :src="scope.row.logoUrl" alt="logoUrl">
          </template>
        </el-table-column>
        <el-table-column prop="shopName" align="center" label="商家名称" width="200"></el-table-column>
        <el-table-column prop="address" align="center" label="商家地址"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handlecancel(scope.$index, scope.row)">取消收藏</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span class="pagin">
        <el-pagination
          v-show="totalpage>10"
          layout="prev, pager, next"
          :total="totalpage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "collection",
  data() {
    return {
      colllist: [],
      totalpage: 10,
      collpage: 1,
      iscancel: false
    };
  },
  computed: {
    ...mapState(["token"])
  },
  methods: {
    //翻页
    handleCurrentChange(val) {
      this.collpage = val;
      this.getSCForList(this.tabid);
    },
    //获取列表数据
    getSCForList() {
      this.$axios({
        url: "/api/website/fvs/getSCForList?page=" + this.collpage + "&rows=10",
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.colllist = res.data.data.list;
          this.totalpage = res.data.data.total;
          this.iscancel = false;
        }
      });
    },
    //取消收藏
    handlecancel(index, row) {
      if (!this.iscancel) {
        this.iscancel = true;
        this.$axios({
          url: "/api/website/fvs/delete?shopId=" + row.id,
          method: "post",
          headers: {
            Authorization: this.token
          }
        }).then(res => {
          if (res.data.code == 0) {
            this.$message.success("操作成功!");
            this.getSCForList();
          }
        });
      }else{
          this.$message("正在处理中，请稍候。。。")
      }
    }
  },
  created() {
    this.getSCForList();
  }
};
</script>
<style lang="less">
.collection {
  .collTop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    border-bottom: 2px solid #666;
  }
  .collcon {
    .logoimg {
      height: 60px;
      width: 60px;
      border-radius: 8rpx;
    }
  }
  .pagin {
    float: right;
  }
}
</style>
